<template>
	<scroll-view class="seg-content" scroll-y>
    <seg-right-menu :button-top="280">
      <view style="margin-top: 20px; height: 80%">
        <view style="margin-left: 3%">
          <u--text text="快捷控制" size="30"></u--text>
        </view>
        <seg-tab-swiper>
          <seg-service-action-select slot="0" type="mobile"></seg-service-action-select>
          <seg-content-choice slot="1" type="mobile" :table-data="choiceData"></seg-content-choice>
        </seg-tab-swiper>
      </view>
    </seg-right-menu>

    <view>
      <view style="width: 100%; text-align: center">测件测试页, 当前设备{{device}}, 屏幕宽高{{winSize.width}}, {{winSize.height}}</view>
      <seg-content-group group-name="seg-content-group组件测试">
        <template>
          <view style="color: red">此组件用于状态其他组件，划分区域</view>
          <view>我是具体内容1</view>
          <view>我是具体内容2</view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-upload组件测试">
        <template>
          <view>
            <view style="color: red">此组件用于上传信息，详情隐藏在弹窗中</view>
            <view style="display: flex; flex-direction: row; align-content: flex-start; width: 100%">
              <view style="flex: 0 0 50%; border: 1px solid red" v-if="device==='desktop'">
                PC适配
                <seg-upload></seg-upload>
              </view>
              <view style="flex: 0 0 50%; border: 1px solid red" v-else>
                移动适配
                <seg-upload></seg-upload>
              </view>
            </view>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-content-choice组件测试">
        <template>
          <view>
            <view style="color: red">此组件用于用户点击后查看对应信息，移动端将尝试最大化压缩大小</view>
            <seg-content-choice :table-data="choiceData"></seg-content-choice>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-tab-swiper组件测试">
        <template>
          <view>
            <view style="color: red">这个联合了tab和swiper组建的滑动组件，适配移动</view>
            <view style="color: red">也是为了代替移动端没有类似分页的组件(有空在自己整)</view>
            <u--text type="info" text="注意匹配slot的编号(string), 同时保证slot数量和滑块一致"></u--text>
            <seg-tab-swiper>
              <view slot="0"> 我是slot 0</view>
              <view slot="1"> 我是slot 1</view>
            </seg-tab-swiper>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-img-cube测试">
        <template>
          <view>
            <view style="color: red">二次封装kristen-img-cube和u-album，为了适配移动端，打算做成相册模式</view>
            <kristen-img-cube :imgCubeList="imgCubeList"></kristen-img-cube>
          </view>
          <view style="margin-left: 10px" >
            <view style="color: red">这里是u-album</view>
            <u-album :urls="albumList" :rowCount="2" :multipleSize="multiImgInfo.width" :space="multiImgInfo.imgSpace"></u-album>
          </view>
          <view>
            <seg-img-cube></seg-img-cube>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-action-select测试">
        <template>
          <view>
            <view style="color: red">判定为手机时, 看右侧栏杆</view>
            <seg-service-action-select></seg-service-action-select>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-predict-log-monitor测试">
        <template>
          <view>
            <view style="color: red">监控窗口，以后改成websocket实现服务器推流</view>
            <!--   TODO 没有实现放置组建到最顶层   -->
            <!--  可通过click事件改变全局的show   -->
            <seg-predict-log-monitor
              :show="lshow" :title="ltitle"
              :type="ltype" :description="ldescription"
            ></seg-predict-log-monitor>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-charts测试">
        <template>
          <view>
            <seg-charts
              :chart-data="chartData"
            ></seg-charts>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-right-button测试">
        <template>
          <view>
            右侧的按钮收纳栏
            <seg-right-button></seg-right-button>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-nerve-interact-box测试">
        <template>
          <view>
            神经交互组建测试
            <seg-nerve-interact-box></seg-nerve-interact-box>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="seg-log-with-socket测试">
        <template>
          <view>
            websocket交互测试
            <seg-log-with-socket></seg-log-with-socket>
          </view>
        </template>
      </seg-content-group>

      <seg-content-group group-name="我是底部占位栏">
        <template>
          <view style="border: 1px solid red"></view>
        </template>
      </seg-content-group>
    </view>
	</scroll-view>
</template>

<script>
  import testData from "../../api/testData";
  import segRightMenu from "../../components/seg-rightmenu/seg-rightmenu";
  import segContentGroup from '../../components/seg-content-group/seg-content-group'
  import segUpload from '../../components/seg-upload/seg-upload'
  import { mapState } from 'vuex'
  import SegContentChoice from "../../components/seg-content-choice/seg-content-choice";
  import SegTabSwiper from "../../components/seg-tab-swiper/seg-tab-swiper";
  import KristenImgCube from "../../components/kristen-imgCube/kristen-imgCube";
  import calCommon from "../../utils/winCal/calCommon";
  import SegImgCube from "../../components/seg-img-cube/seg-img-cube";
  import SegServiceActionSelect from "../../components/seg-service-action-select/seg-service-action-select";
  import appConfig from "../../api/appConfig";
  import SegPredictLogMonitor from "../../components/seg-predict-log-monitor/seg-predict-log-monitor";
  import SegCharts from "../../components/seg-charts/seg-charts";
  import SegRightButton from "../../components/seg-right-button/seg-right-button";
  import SegNerveInteractBox from "../../components/seg-nerve-interact-box/seg-nerve-interact-box";
  import SegLogWithSocket from "../../components/seg-log-with-socket/seg-log-with-socket";

  export default {
    computed: {
      ...mapState('app', ['device', 'winSize', 'uniLeftMenuState'])
    },
    components: {
      SegLogWithSocket,
      SegNerveInteractBox,
      SegRightButton,
      SegCharts,
      SegPredictLogMonitor,
      SegServiceActionSelect,
      SegImgCube,
      KristenImgCube,
      SegTabSwiper,
      SegContentChoice,
      segRightMenu,
      segContentGroup,
      segUpload
    },
    mixins: [calCommon],
    mounted() {
      this.imgCal()
      this.tableCal()

      if(appConfig.system.DEBUGGER){
        let i = 0
        let data = testData.logTestData
        setInterval(()=>{
          let eData = data[i]

          this.lshow = eData.show
          this.ltitle = eData.title
          this.ltype = eData.type
          this.ldescription = eData.description

          i += 1
          i %= data.length
        }, 2000)
      }
    },
    data() {
			return {
			  lshow: true,
        ltitle: 'tt',
        ltype: 'success',
        ldescription: 'ss',
				...testData.alertData,
        tableData: testData.segUploadDetailTableData,
        choiceData: testData.segContentChoiceDetailData,
        imgCubeList: testData.imgCubeListData,
        albumList: testData.albumListData,
        chartData: testData.chartData
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">

	.content .body{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
